<template>

  <a-modal
      :title="MySQL信息"
      :width="600"
      :open="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"
      :destroyOnClose="true"
  >
    <a-form ref="mysqlRef" :model="form" :label-col="{ span: 5 }">
      <a-form-item label="url" name="url">
        <a-input style="width: 100%" v-model:value="form.url" placeholder="url"/>
      </a-form-item>
      <a-form-item label="用户名" name="username">
        <a-input style="width: 100%" v-model:value="form.username" placeholder="用户名"/>
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input style="width: 100%" v-model:value="form.password" placeholder="密码"/>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="test">测试连接</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>

  </a-modal>


</template>

<script setup>

import {reactive, ref, defineEmits} from 'vue';
import _ from 'lodash';
import {message} from 'ant-design-vue';
import {SmartLoading} from '/@/components/framework/smart-loading';
import {datasourceApi} from '/@/api/business/super-computer/datasource/datasource-api';
import {smartSentry} from '/@/lib/smart-sentry';

const emits = defineEmits(['reloadList']);

const visibleFlag = ref(false);


async function test() {
  try {
    formResult.connInformation = "{\"url\"" + ":" + "\"" + form.url + "\"" + ", " + "\"username\"" + ":" + "\"" + form.username + "\"" + ", " + "\"password\"" + ":" + "\"" + form.password + "\"" + "}";
    await datasourceApi.mysqlConnectTest(formResult);
    message.success("连接成功");
  }catch (error){
    message.error("连接失败");
  }
}

async function onSubmit() {
  try {
    await datasourceApi.mysqlConnectTest(formResult);
    await save();
    onClose();
  }catch (error){
    message.error('无法连接到数据源 请检查')
  }
}



async function save() {
  SmartLoading.show();
  try {
    if (formResult.dataSourceId) {
      formResult.connInformation = "{\"url\"" + ":" + "\"" + form.url + "\"" + ", " + "\"username\"" + ":" + "\"" + form.username + "\"" + ", " + "\"password\"" + ":" + "\"" + form.password + "\"" + "}";
      await datasourceApi.update(formResult);
      message.success('修改成功');
    } else {
      formResult.connInformation = "{\"url\"" + ":" + "\"" + form.url + "\"" + ", " + "\"username\"" + ":" + "\"" + form.username + "\"" + ", " + "\"password\"" + ":" + "\"" + form.password + "\"" + "}";
      await datasourceApi.add(formResult);
      message.success('添加成功');
    }
    emits('reloadList');
    onClose();

  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    SmartLoading.hide();
  }
}

function showMySQL(rowData) {
  Object.assign(formResult, rowData);
  Object.assign(formResult, formDefault);
  
  
  
  if (rowData.dataSourceId) {
    let connInformation = JSON.parse(rowData.connInformation);
    form.url = connInformation.url;
    form.username = connInformation.username;
    form.password = connInformation.password;
  }
  if (rowData && !_.isEmpty(rowData)) {
    Object.assign(formResult, rowData);
  }
  visibleFlag.value = true;
}


// function connect(connInformation) {
//   datasourceApi.mysqlconnect(connInformation);
// }

const mysqlRef = ref();

const formResult = {
  dataSourceId: undefined,
  dataSourceType: undefined, //数据源类型
  dataSourceName: undefined, //数据源名称
  connInformation: undefined, //连接信息
}


const formDefault = {
  url: undefined, //数据源类型
  username: undefined, //数据源名称
  password: undefined, //连接信息
};

let form = reactive({...formDefault});

function onClose() {
  Object.assign(form, formDefault);
  
  visibleFlag.value = false;
}


defineExpose({
  showMySQL,
});

</script>

